import React from "react";
import Taro from "@tarojs/taro";
import { Canvas } from "@tarojs/components";

function wrapEvent(e) {
  if (!e) return;
  if (!e.preventDefault) {
    e.preventDefault = function() {};
  }
  return e;
}

export default class F2Canvas extends React.Component {
  componentWillMount() {
    // setTimeout(() => {
    //   this.onWxCanvas();
    // }, 3000);
    this.props.onRef(this);
  }

  // weapp canvas
  onWxCanvas() {
    const query = Taro.createSelectorQuery();

    query
      .select("#" + this.props.id)
      .fields({
        node: true,
        size: true
      })
      .exec(res => {
        const { node, width, height } = res[0];
        const context = node.getContext("2d");
        const pixelRatio = Taro.getSystemInfoSync().pixelRatio;
        // 高清设置
        node.width = width * pixelRatio;
        node.height = height * pixelRatio;
        //  chart全局设置
        const appendPadding = 5;
        const config = { context, width, height, pixelRatio, appendPadding };

        const chart = this.props.onInit(config);
        if (chart) {
          this.chart = chart;
          this.canvasEl = chart.get("el");
        }
      });
  }

  touchStart(e) {
    const canvasEl = this.canvasEl;
    if (canvasEl) {
      canvasEl.dispatchEvent("touchstart", wrapEvent(e));
    }
  }

  touchMove(e) {
    const canvasEl = this.canvasEl;
    e.stopPropagation();
    e.preventDefault();
    if (canvasEl) {
      canvasEl.dispatchEvent("touchmove", wrapEvent(e));
    }
  }

  touchEnd(e) {
    const canvasEl = this.canvasEl;
    if (canvasEl) {
      canvasEl.dispatchEvent("touchend", wrapEvent(e));
    }
  }

  render() {
    return (
      <Canvas
        className={this.props.className}
        style={this.props.style}
        type="2d"
        id={this.props.id}
        onTouchStart={this.touchStart.bind(this)}
        onTouchMove={this.touchMove.bind(this)}
        onTouchEnd={this.touchEnd.bind(this)}
      />
    );
  }
}
